import {Text, TouchableOpacity, View} from 'M/UI/Libraries';
import React, {Fragment} from 'react';
import StyleSheet from 'react-native/Libraries/StyleSheet/StyleSheet';
import {globalService} from 'M/Services';
import {FlatList} from 'react-native';

const links = [
  {
    id: 1,
    title: '支付单跳转',
    link: 'Payment',
    description: '生成支付单,深度连接跳转事例.',
  },
  {
    id: 2,
    title: '2FA Auth',
    link: 'Captcha',
    description: '2次验证码。',
  },
  {
    id: 3,
    title: '设备列表',
    link: 'DeviceList',
    description: '授权列表组件library 插件方式开发事例。',
  },
  {
    id: 4,
    title: '全局弹起框',
    description: '下面弹起的框,事例。',
    event() {
      const upView = globalService.getUpView();
      upView.show(() => {
        return (
          <View>
            <Text style={[styles.title]}>Hello World</Text>
            <TouchableOpacity onPress={() => upView.close()}>
              <View style={[styles.buttonView]}>
                <Text style={[styles.content, {color: '#FFFFFF'}]}>退出</Text>
              </View>
            </TouchableOpacity>
          </View>
        );
      }, true);
    },
  },
];
const MenuLinks = ({navigation}) => {
  function openPage(link) {
    navigation.navigate(link);
  }

  return (
    <View style={styles.container}>
      {links.map(({id, title, link, description, event}) => (
        <Fragment key={id}>
          <TouchableOpacity
            accessibilityRole="button"
            onPress={() => (event ? event() : openPage(link))}
            style={styles.linkContainer}>
            <Text style={styles.link}>{title}</Text>
            <Text style={[styles.description]}>{description}</Text>
          </TouchableOpacity>
        </Fragment>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 24,
  },
  linkContainer: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
  },
  link: {
    flex: 2,
    fontSize: 18,
    fontWeight: '400',
    color: '#1292B4',
  },
  description: {
    flex: 3,
    paddingVertical: 8,
    fontWeight: '400',
    fontSize: 18,
  },
  title: {
    fontSize: 60,
  },
  content: {
    fontSize: 18,
  },
  buttonView: {
    alignItems: 'center',
    textAlign: 'center',
    paddingVertical: 10,
    marginTop: 20,
    marginBottom: 20,
    marginLeft: 100,
    marginRight: 100,
    backgroundColor: '#042b88',
  },
});

export default MenuLinks;
